<template>
    <div>
        <el-dialog :title="form.id?'修改房屋':'添加房屋'" :visible.sync="dialogVisible" width="35%" :before-close="handleClose"
            center>
            <el-form ref="form" :model="form" label-width="140px" label-position="left" :rules="rules"
                style="margin-left:160px">
                <el-form-item label="楼栋" prop="buildingid">
                    <el-cascader v-model="form.buildingid" :options="buildata" :props="propstag" clearable
                        style="width:200px;">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="房间号" prop="houseno">
                    <el-input v-model="form.houseno" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="房间面积（平米）" prop="areas">
                    <el-input v-model="form.areas" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="房间类型" prop="type1">
                    <el-select v-model="form.type1" placeholder="请选择" style="width:100px" >
                        <el-option v-for="item in 10" :key="item.id" :label="item+'室'" :value="item+'室'" ></el-option>
                    </el-select>
                    <el-select v-model="form.type2" placeholder="请选择" style="width:100px">
                        <el-option v-for="item in 10" :key="item.id" :label="item+'厅'" :value="item+'厅'"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="朝向" prop="orientation">
                    <el-select v-model="form.orientation" placeholder="请选择" style="width:200px">
                        <el-option v-for="item in orientation" :key="item.id" :label="item.name" :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="qu()">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { builList, Add } from '@/api/house'
export default {
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        handleClickdata: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            
            form: {
                buildingid: '',
            },
            orientation: [
                { name: '朝北', id: '1' },
                { name: '朝南', id: '2' },
                { name: '朝西', id: '3' },
                { name: '朝东', id: '4' }
            ],
            propstag: {
                value: 'id',
                label: 'name',
                children: 'children',

                emitPath: false
            },
            buildata: [],
            rules: {
                buildingid: [
                    { required: true, message: '', trigger: 'blur' },
                ],
                houseno: [
                    { required: true, message: '房间号不能为空', trigger: 'blur' },
                ],
                areas: [
                    { required: true, message: '房间面积不能为空', trigger: 'blur' },
                ],
                type1: [
                    { required: true, message: '', trigger: 'blur' },
                ],
                orientation: [
                    { required: true, message: '', trigger: 'blur' },
                ],
            }
        };
    },
    created() {
        this.getbuilList()
    },
    // updated(){
    //     this.form = this.handleClickdata
    // },
    watch: {
        handleClickdata: {
            handler(val) {
                if (val) {
                    this.form = val
                    for (let i in this.form) {
                        this.form[i] = val[i]
                        if (i === 'building') {
                            this.buildingid = val.buildingid
                        }
                        // if(i==='type'){
                        //     this.form.type1 = val[i].slice(0,2)
                        //     this.form.type2 = val[i].slice(2,4)
                        // }
                    }
                }
            }
        }
    },
    methods: {
        async getbuilList() {
            let res = await builList()
            if (res.errCode == 10000) {
                this.buildata = res.data.list
            }
        },
        async add() {
            this.form.type = this.form.type1.concat(this.form.type2)
            console.log(this.form.type);
            let res = await Add(this.form)
            if (res.errCode == 10000) {
                let msg = this.form.id ? '修改成功' : '添加成功'
                this.$message({
                    message: msg,
                    type: 'success',
                });
                this.form = {}
            }
            this.$emit("isclose", false, true, {})
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.$emit("isclose", false, false, {})
                })
                .catch(_ => { });
        },
        qu() {
            this.$emit("isclose", false, false, {})
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-form-item {

    padding: 10px 0 !important;

}

/deep/.el-dialog--center .el-dialog__body {
    text-align: initial;
    padding: 0 !important;
}
</style>